<template>
	<h2>readonly与shallowReadonly</h2>
	<h3>state:{{ state }}</h3>
	<hr />
	<button @click="update">更新数据</button>
</template>

<script lang="ts">
import { defineComponent, reactive, readonly } from "vue"

export default defineComponent({
	name: "App",
	setup(props) {
		const state = reactive({
			name: "佐助",
			age: 18,
			car: {
				name: "奔驰",
				color: "blank"
			}
		})
		const state2 = shallowReadonly(state)
		// const state2 = readonly(state)
		const update = () => {
			// state2.name += "___" // 这是一个只读数据（深度只读）
		}
		return {
			// state,
			update,
			state2
		}
	}
})
</script>

<style></style>
